<template>
    <div class="execution-tracking">
      <!-- Metric Cards -->
      <el-row :gutter="20" class="metric-cards">
        <el-col :span="8">
          <div class="metric-card">
            <div class="metric-icon blue">
              <i class="el-icon-data-line"></i>
            </div>
            <div class="metric-content">
              <div class="metric-value">2</div>
              <div class="metric-label">未开始部门</div>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="metric-card">
            <div class="metric-icon green">
              <i class="el-icon-success"></i>
            </div>
            <div class="metric-content">
              <div class="metric-value">2</div>
              <div class="metric-label">完成部门</div>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="metric-card">
            <div class="metric-icon purple">
              <i class="el-icon-time"></i>
            </div>
            <div class="metric-content">
              <div class="metric-value">1</div>
              <div class="metric-label">进行中部门</div>
            </div>
          </div>
        </el-col>
      </el-row>
  
      <!-- Department Sections -->
      <div v-for="(dept, index) in departments" :key="index" class="department-section">
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="chart-card">
              <div class="section-title">部门{{ index + 1 }}执行情况分析</div>
              <div class="progress-chart">
                <div class="gauge-chart" ref="gaugeChart" :id="`gauge-${index}`"></div>
                <div class="gauge-label">标准差</div>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="chart-card">
              <div class="number-display">
                <div class="number">1</div>
                <div class="label">参加部门</div>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="chart-card">
              <div class="number-display">
                <div class="number red">2</div>
                <div class="label">执行评级</div>
              </div>
            </div>
          </el-col>
        </el-row>
  
        <el-row :gutter="20" class="chart-row">
          <el-col :span="12">
            <div class="chart-card">
              <div class="section-title">部门{{ index + 1 }}执行情况分布</div>
              <div class="distribution-chart" ref="distributionChart" :id="`distribution-${index}`"></div>
              <div class="chart-legend">
                <div class="legend-item">
                  <span class="dot blue"></span>
                  <span>未开始</span>
                </div>
                <div class="legend-item">
                  <span class="dot green"></span>
                  <span>完成</span>
                </div>
                <div class="legend-item">
                  <span class="dot yellow"></span>
                  <span>制定中</span>
                </div>
                <div class="legend-item">
                  <span class="dot red"></span>
                  <span>延期</span>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="chart-card">
              <div class="section-title">部门{{ index + 1 }}执行情况统计</div>
              <div class="progress-stats">
                <div class="progress-item">
                  <span class="label">平均完成率</span>
                  <el-progress :percentage="100" :show-text="false" color="#1890ff"></el-progress>
                  <span class="value">100%</span>
                </div>
                <div class="progress-item">
                  <span class="label">部门完成率</span>
                  <el-progress :percentage="100" :show-text="false" color="#1890ff"></el-progress>
                  <span class="value">100%</span>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </template>
  
  <script>
  import * as echarts from 'echarts'
  
  export default {
    name: 'ExecutionTracking',
    data() {
      return {
        departments: [1, 2], // Two departments
        charts: []
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.initCharts()
      })
    },
    beforeDestroy() {
      this.charts.forEach(chart => {
        chart.dispose()
      })
    },
    methods: {
      initCharts() {
        this.departments.forEach((dept, index) => {
          // Initialize gauge charts
          const gaugeChart = echarts.init(document.getElementById(`gauge-${index}`))
          gaugeChart.setOption({
            series: [{
              type: 'gauge',
              startAngle: 90,
              endAngle: -270,
              pointer: { show: false },
              progress: {
                show: true,
                overlap: false,
                roundCap: true,
                clip: false,
                itemStyle: {
                  color: '#1890ff'
                }
              },
              axisLine: {
                lineStyle: {
                  width: 10
                }
              },
              splitLine: { show: false },
              axisTick: { show: false },
              axisLabel: { show: false },
              detail: {
                valueAnimation: true,
                offsetCenter: [0, 0],
                fontSize: 24,
                formatter: '{value}%'
              },
              data: [{
                value: 0
              }]
            }]
          })
  
          // Initialize distribution charts
          const distributionChart = echarts.init(document.getElementById(`distribution-${index}`))
          distributionChart.setOption({
            series: [{
              type: 'pie',
              radius: ['40%', '70%'],
              center: ['50%', '50%'],
              label: {
                show: false
              },
              data: [
                { value: 1, name: '未开始', itemStyle: { color: '#1890ff' } }
              ]
            }]
          })
  
          this.charts.push(gaugeChart, distributionChart)
        })
      }
    }
  }
  </script>
  
  <style scoped>
  .execution-tracking {
    padding: 24px;
    background-color: #f0f2f5;
  }
  
  .metric-cards {
    margin-bottom: 24px;
  }
  
  .metric-card {
    background: #fff;
    padding: 20px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  }
  
  .metric-icon {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
    font-size: 24px;
    color: #fff;
  }
  
  .metric-icon.blue { background-color: #1890ff; }
  .metric-icon.green { background-color: #52c41a; }
  .metric-icon.purple { background-color: #722ed1; }
  
  .metric-content {
    flex: 1;
  }
  
  .metric-value {
    font-size: 24px;
    font-weight: 500;
    line-height: 1;
    margin-bottom: 8px;
  }
  
  .metric-label {
    color: #8c8c8c;
    font-size: 14px;
  }
  
  .department-section {
    margin-bottom: 24px;
  }
  
  .chart-card {
    background: #fff;
    padding: 20px;
    border-radius: 4px;
    margin-bottom: 20px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  }
  
  .section-title {
    font-size: 14px;
    color: #000000d9;
    margin-bottom: 16px;
  }
  
  .progress-chart {
    height: 200px;
    position: relative;
  }
  
  .gauge-chart {
    height: 100%;
  }
  
  .gauge-label {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
    color: #8c8c8c;
  }
  
  .distribution-chart {
    height: 300px;
  }
  
  .chart-legend {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 16px;
  }
  
  .legend-item {
    display: flex;
    align-items: center;
    font-size: 12px;
  }
  
  .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 8px;
  }
  
  .dot.blue { background-color: #1890ff; }
  .dot.green { background-color: #52c41a; }
  .dot.yellow { background-color: #faad14; }
  .dot.red { background-color: #ff4d4f; }
  
  .number-display {
    text-align: center;
    padding: 20px 0;
  }
  
  .number-display .number {
    font-size: 36px;
    font-weight: 500;
    line-height: 1;
    margin-bottom: 8px;
  }
  
  .number-display .number.red {
    color: #ff4d4f;
  }
  
  .number-display .label {
    color: #8c8c8c;
    font-size: 14px;
  }
  
  .progress-stats {
    padding: 20px 0;
  }
  
  .progress-item {
    margin-bottom: 24px;
    display: flex;
    align-items: center;
  }
  
  .progress-item .label {
    width: 100px;
    font-size: 14px;
    color: #000000d9;
  }
  
  .progress-item .value {
    margin-left: 16px;
    font-size: 14px;
    color: #000000d9;
  }
  
  :deep(.el-progress-bar__outer) {
    flex: 1;
    margin: 0 16px;
  }
  </style>